<template>
  <div class="row q-ma-xs bg-grey-3 border-radius-4">
    <form action="" @submit.prevent="search" class="col">
      <q-input
        v-model="keyword"
        class="q-ml-sm q-mr-sm"
        :autofocus="$q.screen.gt.md"
        placeholder="搜索内容"
        borderless
        dense
      >
        <template v-slot:prepend>
          <q-icon name="search" />
        </template>
        <template v-slot:append>
          <q-icon v-if="!$q.screen.lt.md" name="close" @click="$emit('close')" class="cursor-pointer" />
        </template>
      </q-input>
    </form>
    <q-btn v-if="keyword && $q.screen.lt.md" class="q-px-sm" color="grey-8" flat @click="search">
      <q-icon name="arrow_forward" class="size-22"/>
    </q-btn>
  </div>
</template>

<script>
export default {
  name: 'aSearch',
  data () {
    return {
      keyword: ''
    }
  },
  created () {
    this.keyword = this.$route.params.keyword
  },
  methods: {
    search () {
      if (!this.keyword) {
        return
      }
      const type = this.$route.path.match(/^\/forum/) ? 'forum' : 'map'
      const path = `/search/${type}/${this.keyword}`
      this.$router.push({ path })
    }
  }
}
</script>

<style lang="stylus">
</style>
